<template>
  <el-dialog
    title="编辑订单"
    top="15vh"
    :visible.sync="dialogVisible"
    close-on-press-escape
    :before-close="cancel"
    @opened="init"
  >
    <div v-loading="loading" class="order-container" style="padding: 10px;">
      <el-form ref="order" :model="order" class="form-container" label-width="80px">
        <el-form-item label="订单编号" prop="id">
          <el-input v-model="id" readonly />
        </el-form-item>
        <el-form-item label="预约时间" prop="agreeTime">
          <el-input v-model="order.agreeTime" readonly />
        </el-form-item>
        <el-form-item label="订单金额" prop="cost">
          <el-input v-model="order.cost" readonly />
        </el-form-item>
        <el-form-item label="发起人" prop="customer">
          <el-input v-model="order.customer" readonly />
        </el-form-item>
        <el-form-item v-show="order.status==='美容进行中'" label="美容进度" prop="beautyProgress">
          <el-progress :percentage="order.beautyProgress" :color="colorMethod" :stroke-width="15" :text-inside="true" />
          <div>
            <el-button-group>
              <el-button icon="el-icon-minus" @click="decrease" />
              <el-button icon="el-icon-plus" @click="increase" />
            </el-button-group>
          </div>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="order.status" clearable placeholder="请选择">
            <el-option label="预约中" value="预约中" />
            <el-option label="预约通过" value="预约成功" />
            <el-option label="预约失败" value="预约失败" />
            <el-option label="美容进行中" value="美容进行中" />
            <el-option label="美容已完成" value="美容已完成" />
            <el-option label="已结束" value="已结束" />
          </el-select>
        </el-form-item>
        <el-form-item style="margin-bottom: 0px;">
          <el-button style="float: right;margin-left: 10px;" type="primary" @click="submitForm()">{{ id? '修改':'添加' }}</el-button>
          <el-button style="float:right;" @click="cancel()">取 消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
</template>

<script>
import { getOrderInfo, modifyOrderStatus } from '@/api/myOrder'
import { Message } from 'element-ui'
export default {
  name: 'EditDialog',
  props: {
    dialogVisible: Boolean,
    id: {
      type: String,
      default() {
        return ''
      }
    }
  },
  data() {
    return {
      order: {
        agreeTime: '',
        cost: '',
        customer: '',
        status: '',
        beautyProgress: 0,
        serviceList: []
      },
      loading: false
    }
  },
  methods: {
    init() {
      this.loading = true
      getOrderInfo(this.id).then(res => {
        if (res) {
          this.order.agreeTime = res.data.data[0].agreeTime
          this.order.cost = res.data.data[0].cost
          this.order.customer = res.data.data[0].customer
          this.order.status = res.data.data[0].status
          this.order.beautyProgress = res.data.data[0].beautyProgress
          this.order.serviceList = res.data.data[0].serviceList
          setTimeout(() => {
            this.loading = false
          }, 2 * 1000)
        }
        this.loading = false
      })
    },
    submitForm() {
      const query = {}
      const materialIdList = []
      this.order.serviceList.forEach(element => {
        if (element.materialId && element.number !== 0) {
          const materialObj = {}
          materialObj.materialId = element.materialId
          materialObj.expendNum = element.number
          materialIdList.push(materialObj)
        }
      })
      query.status = this.order.status
      query.beautyProgress = this.order.beautyProgress
      query.materialIdList = materialIdList
      modifyOrderStatus(this.id, query).then(res => {
        if (res) {
          Message({
            message: res.data.message,
            type: 'success',
            duration: 5 * 1000
          })
          this.$refs.order.resetFields()
          this.$emit('closeDialog')
        }
      })
      this.$emit('getTable')
    },
    cancel() {
      this.$emit('closeDialog')
      this.$refs.order.resetFields()
    },
    increase() {
      this.order.beautyProgress += 10
      if (this.order.beautyProgress > 100) {
        this.order.beautyProgress = 100
      }
    },
    decrease() {
      this.order.beautyProgress -= 10
      if (this.order.beautyProgress < 0) {
        this.order.beautyProgress = 0
      }
    },
    colorMethod(percentage) {
      if (percentage <= 20) {
        return '#ff3300'
      } else if (percentage <= 40) {
        return '#ff7500'
      } else if (percentage <= 60) {
        return '#bddd22'
      } else if (percentage <= 90) {
        return '#a3d900'
      } else if (percentage === 100) {
        return '#00bc12'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  height: 500px;
  width: 40%;
}
::v-deep .el-dialog__body {
  overflow-y: auto;
  height: 445px;
  padding: 0;
}
.el-form-item{
  margin-bottom: 20px;
}
</style>
